<template>
	<div>
		<br/>
		<el-button icon="el-icon-edit" type="success" plain @click="editModel()">
			编辑资料
		</el-button>
		<br/><br/>
	<el-descriptions direction="vertical" :column="3" border>
	  
	  <el-descriptions-item>
		<template slot="label">
			<i class="el-icon-search"></i>
		          账号
		</template>
		  {{userDetail.userNo}}
	  </el-descriptions-item>
	  
	  <el-descriptions-item>
		<template slot="label">
			<i class="el-icon-user"></i>
		        用户名
		</template>
		  {{userDetail.userName}}
	  </el-descriptions-item>
		  
	  <el-descriptions-item>
		<template slot="label">
			<i class="el-icon-picture-outline-round"></i>
		        头像
		</template>
		<el-avatar icon="el-icon-user-solid" :src="userDetail.userImage"></el-avatar>
	  </el-descriptions-item>
	  
	  <el-descriptions-item>
		<template slot="label">
			<i class="el-icon-mobile-phone"></i>
		        手机号
		</template>
		  {{userDetail.userPhone}}
	  </el-descriptions-item>
	  
	  <el-descriptions-item >
		<template slot="label">
			<i class="el-icon-video-camera"></i>
		        年龄
		</template>
		  {{userDetail.userAge}}
	  </el-descriptions-item>

	  <el-descriptions-item>
		<template slot="label">
			<i class="el-icon-male"></i>
			/
			<i class="el-icon-female"></i>
		          性别
		</template>
		  {{userDetail.userGender}}
	  </el-descriptions-item>
	</el-descriptions>
	
	<!-- model 编辑框 -->
	<UpdateProfile :dialogData="dialogData" @emitDialogData="receiveDialogData"></UpdateProfile>
			
	
	</div>
</template>

<script>
	import UpdateProfile from "@/components/account/UpdateProfile";
	
	
	export default{
		name:"Profile",
		components: {
			UpdateProfile,
		},
		data: function () {
			return {
				userDetail:{
					userNo:0,
					userName:"",
					userPhone:"",
					userImage:"",
					userAge:"",
					userGender:"",
				},
				// 编辑窗口数据
				dialogData: {
					userNo:0,
					// 是否显示编辑窗口
					showDialog: false,
				},
			};
		},
		methods:{
			initUserInfo: function(){
				 var url = "/userInfo/showInfo/"+ this.userDetail.userNo;
				this.$Request
					.fetch(url)
					.then((result) => {
						console.log(result);
						this.userDetail = result.data;
					})
					.catch((error) => {
						this.$message.error(error);
					});
			},
			// 编辑 model
			editModel: function () {
				//this.dialogData.userName = this.userDetail.userName;
				//console.log(this.dialogData.userInfo);
				this.dialogData = {
					userNo:this.userDetail.userNo,
					showDialog:true
				}
			},
			receiveDialogData: function (val) {
				this.dialogData.showDialog = val;
				this.initUserInfo();
			},
			
		},
		mounted() {
			this.userDetail.userNo = this.$VuexStore.state.token.userNo;
			this.initUserInfo();
		},
	};
</script>

<style>

</style>